import { connect } from "react-redux";
import { getDetail, getUser, setTheme, removeTheme, setThemeAndVideos } from "../action/action";
import "../css/Detail.scss"
import { Switch, Route, NavLink } from 'react-router-dom';
import { Dtrec } from './../components/Dtrec/dtrec';
import { Square } from './../components/Square/square';
import { getCookie } from './../js/cookie';
import { Toast } from 'antd-mobile';
@connect(
    state => {
        return {
            detailData: state.detail.detailData,
            userData: state.my.userData
        }
    }
)
export class Detail extends React.Component {
    componentDidMount() {
        let id = this.props.match.params.id;
        let { dispatch } = this.props;
        dispatch(getDetail(id))
        dispatch(getUser(getCookie("ky_uid"), (data) => { }));
    }
    setAtt(id, theme) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (theme.indexOf(id) == -1) {
                dispatch(setTheme(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
                dispatch(setThemeAndVideos(id))
            } else {
                dispatch(removeTheme(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    render() {
        let { userData, detailData } = this.props;
        if (detailData) {
            return (
                <div className="detail">
                    <div className="header">
                        <img src={detailData.tagInfo.bgPicture} alt="" />
                        <div>
                            <a onClick={() => this.props.history.push(getCookie("ky_history_url"))}><i></i></a>
                            <h3>{detailData.tagInfo.name}</h3>
                            <p>{detailData.tagInfo.description}</p>
                            <span onClick={() => { userData ? this.setAtt(detailData.tagInfo.id, userData.result.uatt_theme) : Toast.info("未登录，请先登录", 1) }}>{userData && userData.result.uatt_theme.indexOf(detailData.tagInfo.id) != -1 ? "已关注" : "+关注"}</span>
                        </div>
                    </div>
                    <div className="classify cl">
                        <div><NavLink activeClassName="active" to={"/detail/dtrec/" + detailData.tagInfo.id}>{detailData.tabInfo.tabList[0].name}</NavLink></div>
                        <div><NavLink activeClassName="active" to={"/detail/square/" + detailData.tagInfo.id}>{detailData.tabInfo.tabList[1].name}</NavLink></div>
                    </div>
                    <Switch>
                        <Route path="/detail/dtrec/:id" component={Dtrec} />
                        <Route path="/detail/square/:id" component={Square} />
                    </Switch>
                </div>
            )
        } else {
            return (
                <div></div>
            )
        }
    }
}